<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="../../assets/js/jquery-2.0.3.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/hammer.min.js"></script>
    <script src="../../assets/js/bootstrap.table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="../../assets/js/bootstrap.table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="../../assets/ztree/js/jquery.ztree.all.min.js" type="text/javascript"></script>
    <script src="../../assets/js/dialog.js" type="text/javascript"></script>
    <script src="../../assets/js/jquery.cookie.js" type="text/javascript" ></script>
    <script src="../../assets/js/common.js" type="text/javascript"></script>
    <script src="../../assets/js/myUrl.js" type="text/javascript"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../assets/css/bootstrap.table/bootstrap-table.min.css"/>
    <link href="../../assets/css/dialog.css" rel="stylesheet" />
    <link href="../../assets/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="../../assets/css/common.css" rel="stylesheet" />
</head>
<script type="text/javascript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        data: {
            key: {
                children: "treeVoList"
            }
        },
        check: {
            enable: false
        },
        callback: {
            onClick: zTreeOnClick
        }
    };


    $(document).ready(function () {
        //调用函数，初始化表格
        initTree();
        initTable(1);
    })

    function initTree() {
        var treeJson = myAjax({deptId: 1}, local_url.dingding_dept_list.url, local_url.dingding_dept_list.method).data;
        var result = [
            { "id":1, "name":"组织架构",
                isParent:true,
                nocheck:true,
                "treeVoList": treeJson
            }
        ];
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, result);
    }


    function zTreeOnClick(event, treeId, treeNode) {
        $("#parentId").val(treeNode.id)
        initTable(treeNode.id);
    }


    function initTableRow(){
        var pid = $("#parentId").val();
        var deptName = $("#queryName").val();
        initTable(pid, deptName);
    }

    function initTable(prentId, deptName) {
        var options = {};
        options["deptId"] = prentId;
        commonInitTable(local_url.dingding_user_list.url, "mytab", options);
    }



</script>
<body style="padding:5px;overflow:auto;">
<div style="width: 15%;float:left;border-right: 1px solid #ffffff;">
    <ul id="treeDemo" class="ztree">

    </ul>
</div>
<div style="width: 85%;float:left;">

    <input type="text" class="form-control" id="parentId" name="parentId"   style="display:none"/>
    <div class="panel panel-default" >
        <div class="panel-heading">
            查询条件
        </div>
        <div class="panel-body form-group" style="margin-bottom:0px;">
            <form id="searchForm">
                <label class=" control-label" style="float:left;text-align: left; margin-top:5px">名称：</label>
                <input type="text" class="form-control" style="width: 100px;float:left;" name="queryName" id="queryName"/>
                <div class="col-sm-1" style="float:left;">
                    <button class="btn btn-primary" id="search_btn" onclick="initTableRow();return false;">查询</button>
                </div>
            </form>
        </div>
    </div>
    <table id="mytab" data-toggle="table" class="table table-hover table-bordered" data-single-select="true"
           data-toolbar-align="right" data-toolbar="#toolbar" data-pagination="true"  data-page-size="5" data-striped="true"
           data-page-list="[5,10,20,30]" data-pagination-h-align="right" data-pagination-detail-h-align="left"
           data-pagination-loop="false" data-click-to-select="true" >
        <colgroup>
            <col style="width: 3%">
            <col style="width: 7%">
            <col style="width: 10%">
            <col style="width: 10%">
            <col style="width: 10%">
            <col style="width: 10%">
            <col style="width: 15%">
        </colgroup>
        <thead>
        <tr >
            <th data-align="center" data-valign="middle" data-checkbox="true" ></th>
            <th data-align="center" data-valign="middle" data-field="userid">id</th>
            <th data-align="center" data-valign="middle" data-field="name">名称</th>
            <th data-align="center" data-valign="middle" data-field="mobile">手机号</th>
            <th data-align="center" data-valign="middle" data-field="position">职位信息</th>
            <th data-align="center" data-valign="middle" data-field="email">员工的邮箱</th>
            <th data-align="center" data-valign="middle" data-field="jobnumber">员工工号</th>
        </tr>
        </thead>
    </table>
</div>

</body>
</html>